<template>
  <div id="city">
    <city-nav-bar :city-detail="cityDetail" />
    <scroll class="scroll">
      <city-submit-box @handleSubmit="handleSubmit" />
      <city-address-list :address-list="address" :is-show="isShow" />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import CityNavBar from "./childComps/CityNavBar";
import CitySubmitBox from "./childComps/CitySubmitBox";
import CityAddressList from "./childComps/CityAddressList";

import { getCity, getAddress } from "network/city";
export default {
  data() {
    return {
      cityDetail: {},
      address: [],
      isShow: false,
    };
  },
  activated() {
    this.getCity(this.$route.params.id);
  },
  deactivated() {
    this.address = []
  },
  methods: {
    getCity(id) {
      getCity(id).then((res) => {
        this.cityDetail = res;
      });
    },
    getAddress(inputText) {
      getAddress(this.cityDetail.id, inputText).then((res) => {
        this.address = res;
        this.isShow = !this.address.length ? true : false;
      });
    },
    handleSubmit(inputText) {
      this.getAddress(inputText);
    },
  },
  components: {
    Scroll,
    CityNavBar,
    CitySubmitBox,
    CityAddressList,
  },
};
</script>
<style lang="less" scoped>
#city {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  z-index: 1;
  .scroll {
    height: calc(100% - 44px);
  }
}
</style>